<template>
    <div class="visit"><a href="https://www.j-w-v.com/" target="_blank">Visit the live version here!</a></div>
    <div id="particles-js">
        <div class="container">
            <div class="row top">
                <div class="twelve column">
                    <div class="logo">V</div>
                    <h1>Joseph William Victory</h1>
                    <h2> Web Developer</h2>
                </div>
            </div>

            <div class="row">
                <div class="one-half column">
                    <div class="pens pulled">
                        <h1>Pens</h1>
                        <ul>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/DIcJx">Pricing Tables</a></li>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/RrMLjV">Portfolio Home Page</a></li>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/PwqNvW">Login Process</a></li>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/ORkmKo">Responsive Blog Homepage</a></li>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/ZYLGMZ">Portfolio Opening Page</a></li>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/JXdRqd">Blog Post Using Vertical Rhythm</a></li>
                            <li><a target="_blank" rel="noopener noreferrer"
                                    href="https://codepen.io/j-w-v/pen/bEVvLM">Pricing Tables: Black And Yellow</a></li>
                        </ul>
                    </div>
                </div>

                <div class="one-half column">
                    <div class="posts pulled">
                        <h1>Posts</h1>
                        <ul>
                            <li><a href="https://www.j-w-v.com/writing/index.php/20-awe-inspiring-codepen-examples-you-can-learn-from"
                                    target="_blank" rel="noopener noreferrer">20 Awe-Inspiring Codepen Examples You Can
                                    Learn From <span class="new">NEW</span></a></li>
                            <li><a href="https://www.j-w-v.com/writing/index.php/hero-images-20-free-places-to-find-them"
                                    target="_blank" rel="noopener noreferrer">Hero Images &amp; 20 Free Places To Find
                                    Them </a></li>
                            <li><a href="https://www.j-w-v.com/writing/index.php/18-mobile-first-css-frameworks"
                                    target="_blank" rel="noopener noreferrer">18 Mobile First CSS Frameworks </a></li>
                            <li><a href="https://www.j-w-v.com/writing/index.php/how-i-grew-as-a-javascript-developer"
                                    target="_blank" rel="noopener noreferrer">How I Grew As A JavaScript Developer </a>
                            </li>
                            <li><a href="https://www.j-w-v.com/writing/index.php/css-s-undersung-property-box-sizing"
                                    target="_blank" rel="noopener noreferrer">CSS's undersung property: box-sizing </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container ">
            <div class="footer">
                <p>Made using the awesome <a href="https://github.com/VincentGarreau/particles.js/">Particles.js</a>, <a
                        href="http://cpv2api.com/">Codepen V2 API</a> & <a
                        href="http://getskeleton.com/">Skeleton.css</a></p>
            </div>
        </div>
    </div>

</template>

<style>
/* body {
    background: #282931;
    -webkit-font-smoothing: antialiased;
    font-family: "Varela Round", sans-serif;
    height: 100%;
} */

canvas {
    height: 100vh;
    z-index: -10;
    position: fixed;
    top: 0px;
}

a {
    color: #bbbbc4;
    text-decoration: none;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    color: #fc3565;
}

h1 {
    color: #fc3565;
    padding-bottom: 0px;
    margin-bottom: 1%;
}

h2 {
    color: #555560;
    font-size: 3rem;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

.logo {
    font-family: "Monoton", cursive;
    color: white;
    font-size: 8rem;
}

.top {
    padding-bottom: 5rem;
}

.pulled ul li {
    list-style: none;
    margin-right: 2rem;
    font-size: 1.8rem;
}

.pulled h1 {
    color: white;
    font-size: 3rem;
}

.pulled ul li span {
    font-size: 1.2rem;
}

.footer {
    padding-top: 5rem;
}

.footer p {
    color: white;
    font-size: 1.2rem;
}

.visit {
    color: white;
    font-size: 12px;
    background: #32333a;
    width: 146px;
    padding: 6px;
    border-radius: 10px;
    position: fixed;
    right: 20px;
}

span.new {
    background-color: #fc3565;
    font-weight: 700;
    padding: 0.2rem;
    margin-left: 0.4rem;
    color: #fff;
}
</style>
